<template>
  <div class="container">
    <div class="item1" v-for="(item, index) in listDatas" :key="index" @click="handerModelInfo(item.modelId)">
      <div class="headerBanner">
        <div class="bannerHeader">{{ item.modelName }}</div>
        <div class="bannerBodyStyle">
          <div>
            <span>设备状态</span>
            <img v-if="item.deviceStatus == 'run'" style="width: 25px" src="@/assets/images/圆形 (1).png" alt="" />
            <img v-else style="width: 25px" src="@/assets/images/圆形.png" alt="" />
          </div>
          <div>
            <span>软件状态</span>
            <img v-if="item.softwareStatus == 'run'" style="width: 25px" src="@/assets/images/圆形 (1).png" alt="" />
            <img v-else style="width: 25px" src="@/assets/images/圆形.png" alt="" />
          </div>
          <div class="GPUUseStyle">
            <span>CPU占用</span>
            <el-progress class="ai-progress" :text-inside="true" :stroke-width="16"
              :percentage="item.gpuUsageRate"></el-progress>
          </div>
        </div>
      </div>
      <div class="bodyShowStyle">
        <div class="leftBodyShowStyle">
          <div class="leftBodyShowStyleFirst">
            <img src="@/assets/images/标注员.png" alt="" />
            数据标注员
          </div>
          <div>
            <div class="version">
              标注工具版本：{{ item.annotateToolVersion }}
            </div>
            <div class="version">离线评估数据集：{{ item.dataSetName }}</div>
            <div class="charts">
              <ve-histogram :data="item.chartData" :extend="extend" :tooltip-visible="true" height="130px" />
            </div>
          </div>
        </div>
        <div class="rightBodyShowStyle">
          <div class="rightBodyShowStyleFirst">
            <img src="@/assets/images/训练员.png" alt="" />
            模型训练员
          </div>
          <div class="rightBodyShowStyleCenter">
            <div>
              <p>
                当前使用版本： <span>{{ item.currentModelVersion }}</span>
              </p>
              <p>
                昨日新增正样本： <span>{{ item.yesNewPositive }}</span>
              </p>
              <p>
                昨日新增负样本： <span>{{ item.yesNewNegative }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import VeLine from "v-charts/lib/line";
import VeHistogram from "v-charts/lib/histogram";
import "@/assets/styles/aifactoryscreen.scss";
import biaozhu from "@/assets/images/标注员.png";
import xunlian from "@/assets/images/训练员.png";
import colse from "@/assets/images/圆形.png";
import open from "@/assets/images/圆形 (1).png";
import { getDashboardData, getModelInfo } from "@/api/aifactory";
export default {
  name: "",
  components: { VeLine, VeHistogram },
  data() {
    return {
      extend: {
        // backgroundColor: "#020b2d",
        color: "#04CFE4",
        grid: {
          top: 30,
          bottom: 5,
          left: 10,
        },
        xAxis: {
          type: "category",
          axisTick: false,
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
          },
        },
        yAxis: {
          type: "value",
          interval: 100,
          show: false,
          splitLine: false,
          axisLabel: {
            color: "#fff",
          },
        },
        series: {
          name: "",
          type: "pictorialBar",
          symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
          label: {
            show: true,
            color: "#fff",
            position: "top",
          },
        },
      },
      listDatas: [],
      interval: null
    };
  },
  created() { this.getDashboardData(); },
  mounted() {
    this.interval = setInterval(() => {
      this.getDashboardData();
    }, 10000);
  },
  methods: {
    getDashboardData() {
      getDashboardData().then((res) => {
        console.log(143, res);
        res.data.aiModelInfos.forEach((item) => {
          item.chartData = {
            columns: ["data", "value"],
            rows: [
              { data: "样本数", value: item.dataSetNum },
              { data: "测试数", value: item.dataSetTestNum },
              { data: "条目数", value: item.dataSetTrainNum },
            ],
          };
        });
        this.listDatas = res.data.aiModelInfos;
        console.log(156, this.listDatas);
      });
    },
    // 跳转info页
    handerModelInfo(params) {
      console.log('modelid', params)
      if (params == 1 || params == 7) {
        this.$router.push({
          path: "/aifactory/modelview",
          query: { id: params, timer: this.interval },
        });
      }

      // getModelInfo(id).then(res => {
      //   console.log(176, res)
      // })
    }
  },
};
</script>
<style scoped>
.ai-progress {
  line-height: 1.5 !important;
  width: 60%;
}
</style>
